<template>
	<view class="container">
		<!-- 自定义顶部导航栏 -->
		<view class="custom-app-bar-wrapper" :style="{ height: `calc(100rpx + ${statusBarHeight}px)` }">
			<view class="custom-app-bar" :style="{ top: statusBarHeight + 'px' }">
				<u-icon name="arrow-left" size="40" class="back-icon" @click="goBack"></u-icon>
				<text class="title">选择绘本集</text>
			</view>
		</view>

		<!-- 绘本集列表 -->
		<view class="content" :style="{ paddingTop: `calc(100rpx + ${statusBarHeight}px)` }">
			<view class="bookshelf-list">
				<view
				class="bookshelf-item"
				v-for="item in bookShelfList"
				:key="item.id"
				@click="toggleSelect(item)"
			>
				<view class="bookshelf-info">
					<image class="bookshelf-cover" :src="item.image || '/static/empty.png'" mode="aspectFill"></image>
					<view class="bookshelf-details">
						<text class="bookshelf-name">{{ item.title }}</text>
						<text class="bookshelf-count">{{ item.bookCount || 0 }}本</text>
					</view>
				</view>
					<view class="checkbox">
						<u-icon
							:name="isSelected(item.id) ? 'checkbox-mark' : 'checkbox'"
							:color="isSelected(item.id) ? '#007aff' : '#c8c9cc'"
							size="40"
						></u-icon>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="bookShelfList.length === 0 && !loading">
				<image src="/static/empty.png" class="empty-image"></image>
				<text class="empty-text">暂无绘本集</text>
			</view>

			<!-- 加载状态 -->
			<view class="loading-state" v-if="loading">
				<u-loading mode="flower"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>
		</view>

		<!-- 底部确认按钮 -->
		<view class="footer-bar">
			<view class="selected-info" v-if="selectedIds.length > 0">
				<text>已选择 {{ selectedIds.length }} 个绘本集</text>
			</view>
			<u-button
				type="primary"
				shape="circle"
				@click="confirm"
				:disabled="selectedIds.length === 0"
				size="large"
			>
				确认选择{{ selectedIds.length > 0 ? `(${selectedIds.length})` : '' }}
			</u-button>
		</view>
	</view>
</template>

<script>
	import * as BookShelfApi from '@/api/bookShelf'

	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				bookShelfList: [],
				selectedIds: [], // 已选择的绘本集ID数组
				loading: false
			};
		},
		onLoad(options) {
      this.type = options.type || ''; // 获取type参数，如果没有则默认为空
      console.log('接收到的type参数:', this.type);
      this.getBookShelfList(this.type);
			// 获取已选择的绘本集ID
			if (options.selected) {
				this.selectedIds = options.selected.split('_').filter(id => id).map(id => parseInt(id));
			}
		},
		methods: {
      // 获取绘本集列表
      async getBookShelfList(type) {
        this.loading = true;
        try {
          // 获取英文和中文书架的绘本集
          const [englishResponse, chineseResponse] = await Promise.all([
            BookShelfApi.getCategoryList({type: '1'}),
            BookShelfApi.getCategoryList({type: '2'})
          ]);

          if(type==='1'){
            console.log("11111"+type);
            this.bookShelfList = englishResponse.data;
          }else{
            console.log("22222"+type);

            this.bookShelfList = chineseResponse.data;
          }
          console.log("bookShelfList" + this.bookShelfList);
        } catch (error) {
          console.error('获取绘本集列表失败:', error);
          uni.showToast({
            title: '获取绘本集列表失败',
            icon: 'none'
          });
        } finally {
          this.loading = false;
        }
      },

			// 切换选择状态
			toggleSelect(item) {
				const index = this.selectedIds.indexOf(item.id);
				if (index > -1) {
					// 取消选择
					this.selectedIds.splice(index, 1);
				} else {
					// 添加选择
					this.selectedIds.push(item.id);
				}
			},

			// 判断是否已选择
			isSelected(id) {
				return this.selectedIds.includes(id);
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 确认选择
			confirm() {
				if (this.selectedIds.length === 0) {
				uni.showToast({
					title: '请至少选择一个绘本集',
					icon: 'none'
				});
				return;
			}

				// 获取选中的绘本集信息
				const selectedBookShelves = this.bookShelfList.filter(item =>
					this.selectedIds.includes(item.id)
				);

				// 通过事件通道传递数据
				const eventChannel = this.getOpenerEventChannel();
				if (eventChannel) {
					eventChannel.emit('selectBookShelf', {
						bookShelfIds: this.selectedIds.join('_'),
						selectedBookShelves: selectedBookShelves
					});
				}

				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f7f7f7;
	}

	.custom-app-bar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.custom-app-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}



	.content {
		flex: 1;
		padding: 20rpx;
	}

	.bookshelf-list {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.bookshelf-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}
	}

	.bookshelf-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.bookshelf-cover {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 24rpx;
	}

	.bookshelf-details {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.bookshelf-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
	}

	.bookshelf-count {
		font-size: 24rpx;
		color: #999;
	}

	.checkbox {
		padding: 10rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		opacity: 0.6;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.loading-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.footer-bar {
		padding: 20rpx 20rpx 40rpx 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.selected-info {
		font-size: 28rpx;
		color: #007aff;
		text-align: center;
		display: block;
	}

	// 自定义确认按钮样式
	.footer-bar ::v-deep .u-btn {
		height: 100rpx !important;
		line-height: 100rpx !important;
	}
</style>
